<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>确认购买</title>
	<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_474420_wtgqa42sa5s9vn29.css">
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/fontSize.js"></script>
	<script type="text/javascript" src="js/layer/layer.js"></script>
	<script type="text/javascript" src="js/zepto.min.js"></script>
	<script type="text/javascript" src="js/swiper.min.js"></script>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
	<script type="text/javascript" src="js/config.js"></script>
	<style type="text/css">
	.choice_guize{background: #fff;margin:.2rem 0;padding: 0 .3rem;}
	.choice_pay_title{font-size: .3rem;color: #333;height: .7rem;line-height: .7rem;}
	.choice_size{overflow: hidden;}
	.choice_size>li{height: .68rem;line-height: .68rem;padding: 0 .2rem;border:1px solid #999;color: #333;font-size: .26rem;border-radius: .1rem;margin:0 .3rem .24rem 0;float: left;}
	.choice_size>li.selected{background: #fb597b;color: #fff;border:1px solid #fb597b;}
	.address_empty{width: 5rem;display: inline-block;float: left;color: #999;padding-top: .27rem;font-size: .32rem;}
	</style>
</head>
<body class="bgcolor pay">
<div id="app">
	<div class="pay_title" @click="choiceAdress">
		
		<div v-if="adress.name">
			<ul>
				<li><span>{{adress.name}}</span>  <span>{{adress.mobile}}</span></li>
			   <li>{{adress.distict}}{{adress.street}}{{adress.detail}}</li>
			</ul>
			
		</div>
		<div class="address_empty" v-else>没有填写收货地址，赶快去填写吧</div>
		<i class="iconfont icon-xiangyou"></i>
		<img src="img/p_92.png" alt="">

	</div>
	<div class="pay_info">
		<div class="pay_img">
			<span>
				<img :src="resObj.good.url" alt="">
			</span>
		</div>
		<ul class="pay_right">
			<li class="pay_name">{{resObj.good.name}}</li>
			<!-- <li class="pay_size">规格：1盒x8个</li> -->
			<span v-if="resObj.coupon==null">￥{{resObj.good.price}}</span>
			<span v-else>￥{{resObj.coupon.price}}</span>
		</ul>
	</div>
	<div class="choice_guize">
		<div  v-for="(item,i) in resObj.good.specs">
			<div class="choice_pay_title">{{item.name}}</div>
			<ul class="choice_size">
				<li v-for="(v,j) in item.options" :class="v.selected?'selected':''" @click="select(i,j)">{{v.name}}</li>
			</ul>
		</div>
		
	</div>
	<ul class="pay_desc">
		<li class="borderBottom">商品
			<span class="fr" v-if="resObj.coupon==null">￥{{resObj.good.price}}</span>
			<span class="fr" v-else>￥{{resObj.coupon.price}}</span>
		</li>
		<li class="borderBottom">数量
			<span class="fr pay_num_div">
				<button class="pay_plus" type="button" @click="addNum"><i class="iconfont icon-jia"></i></button>
				<input type="text" v-model.trim="num" v-on:blur="getTotle">
				<button class="pay_minu" type="button" @click="reduceNum"><i class="iconfont icon-jian"></i></button>

			</span>
		</li>
		<!-- <li class="borderBottom">运费<span class="fr">￥{{freight}}</span></li> -->
		<li class="borderBottom">小计<span class="fr">￥{{total}}</span></li>
	</ul>
	<ul class="pay_desc">
		<li>配送方式<span class="fr xitong">系统优选</span></li>
	</ul>
	<div class="footer_pay">
		合计金额： <span>￥{{total}}</span>
		<div class="pay_btn"  @click="saveOrder">确认支付</div>
	</div>
</div>
<script type="text/javascript">
	 var app = new Vue({
			el: '#app',
			data: {
			    list:[],
		        unionid:GetQueryString("unionid"),
		        token:GetQueryString("token"),
		        shopId:GetQueryString("shopId"),
		        orderId:GetQueryString("orderId")?GetQueryString("orderId"):null,
		        num:1,
		        freight:10,
		        resObj:{
		        	good:{}
		        },
		        adress:{},
		        total:0
		       
			},
			mounted(){
			  this.getList();
			  this.getDetail();
			
			},
			methods:{
				addNum(){
					this.num++; 
					this.getTotle();
				},
				goNext(id){
					var that=this;
					wx.miniProgram.navigateTo({
  						url: '/pages/pay/pay?token='+this.token+'&id='+id
					});
				},
				reduceNum(){
					if(this.num==1){
						showLayer("购买数量必须大于等于1哟~");
						return;
					}
					this.num--; 
					this.getTotle();
				},
				choiceAdress(){
					 window.location.replace("adressList.html?token="+this.token+"&unionid="+this.unionid+"&shopId="+this.shopId);     
				},
				getTotle(){
					var t=/^\d+(\.\d+)?$/; 					
					if(!t.test(this.num)){
                       showLayer("购买数量必须大于等于1的正整数哟~");
                       return;
					}
					if(this.resObj.coupon!=null){
						this.total=(parseInt(this.num)*parseFloat(this.resObj.coupon.price)).toFixed(2);
					}else{
						this.total=parseInt(this.num)*parseFloat(this.resObj.good.price).toFixed(2);						
					}                   
				},
				getList(){
					var that=this;
					ajaxFun("GET","/trade/address/list",{
	                       token:this.token

	                    },function(data){
	                    	if(data.error==0){
                              that.list=data.addresses;
                              for (var i = 0; i < that.list.length; i++) {
                                  if(that.list[i].id==localStorage.id){
                                  	  that.adress=that.list[i];
                                  }
                              }
                         
	                    	}else{

	                    	}        
                    }); 
				},
				saveOrder(){
					var that=this;
					var spec=[];
					if(!this.adress.name){
					   showLayer("请填写收货地址~");
                       return;
					}
					for (var i = 0; i < that.resObj.good.specs.length; i++) {
						var obj={};
						obj.sid=that.resObj.good.specs[i].id;
						for (var j = 0; j < that.resObj.good.specs[i].options.length; j++) {
						    if(that.resObj.good.specs[i].options[j].selected){
						   	   obj.soid=that.resObj.good.specs[i].options[j].id;
						    } 

						}
						spec.push(obj); 
					}
					ajaxFun("GET","/trade/order/save",{
	                       	// id: this.orderId,
							token: this.token,
							gid: this.shopId,
							aid:localStorage.id,
							count: this.num,
							spec: spec

	                    },function(data){
	                    	if(data.error==0){
	                    		
	                    		setTimeout(function(){
	                    			that.goNext(data.order.id);
	                    		},300);
	                                                   
	                    	}else{
                                   
	                    	}        
                    });  
				},
				select(n,m){
					var that=this;
					
                  	for (var j = 0; j < that.resObj.good.specs[n].options.length; j++) {
                  	    that.resObj.good.specs[n].options[j].selected=false;
                  	}
                    that.resObj.good.specs[n].options[m].selected=true;
                    that.resObj.good.specs=that.resObj.good.specs.slice();
				},
				getDetail(){
					var that=this;
					ajaxFun("GET","/trade/good/detail",{
	                       token:this.token,
	                       id:this.shopId
	              
	                    },function(data){
	                    	if(data.error==0){
                              for (var i = 0; i < data.good.good.specs.length; i++) {
                              	for (var j = 0; j < data.good.good.specs[i].options.length; j++) {   
                              	   if(j==0){
                              	   	 data.good.good.specs[i].options[j].selected=true;
                              	   }else{
                              	     data.good.good.specs[i].options[j].selected=false;
                              	   }                   
                              		
                                                    	   
                              	}
                              	    
                              }
                              that.resObj=data.good;
                               that.getTotle();
	                    	}else{

	                    	}
	                     
                    }); 
				},
			}
		});
</script>	
</body>
</html>